<template>
  <div class="video__plugin__box">
    <div class="plugin__box__storeSelect">
      设备：{{$route.params.value.name}}
    </div>
    <div class="el-tabs__header is-top">
      <div class="el-tabs__nav-wrap is-top">
        <div class="el-tabs__nav-scroll">
          <div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(0px);">
            <div class="el-tabs__active-bar is-top" :style="type === 'first' ? firstType :secondType"></div>
            <div id="tab-first" :class="type === 'first' ? 'is-active' : ''"  class="el-tabs__item is-top" @click="startRealPlay">
              预览
            </div>
            <div id="tab-second" :class="type === 'second' ? 'is-active' : ''" class="el-tabs__item is-top" @click="startPlayBacky">
              回放
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="video__detail__page">
      <el-row :gutter="20" class="plugin__page" :style="type === 'first' ? firstPluginType : ''">
        <el-col v-if="type !== 'first'" class="video__plugin__calendar" :span="9">
          <el-calendar style="height: 400px">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <p @click="handleData(data)">
                {{ data.day.split('-').slice(2).join('-')}}
              </p>
            </template>
          </el-calendar>
          <el-row class="page__item__bottom" type="flex" align="middle"  v-if="type !== 'first'">
            <el-col :span="5"> 回放时间段：</el-col>
           <el-col :span="19">
             <el-date-picker
               v-model="dataValue"
               type="datetimerange"
               align="right"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               @change="handleVideoPicker"
               :default-time="['00:00:00', '23:59:59']">
             </el-date-picker>
           </el-col>
          </el-row>
        </el-col>
        <el-col :span="15" class="plugin__page__item">
          <div class="page__item__top">
            <div id="divPlugin" class="plugin" style="z-index: -1"></div>
            <el-button @click="clickbig" class="video-rank video-style" icon="el-icon-rank" circle></el-button>
            <el-button @click="clickVideoPause" class="video-pause video-style" :icon="videoPauseStyle ? 'el-icon-video-pause' : 'el-icon-video-play'" circle></el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
  import {formatDate} from '@/utils/format-data'

  export default {
    name: 'videoPlugin',
    data() {
      return {
        dataValue: [],
        isLoad: true,
        videoPauseStyle: false,
        type: 'first',
        firstPluginType: {
          display: 'flex',
          justifyContent: 'center',
        },
        firstType: {
          width: '56px',
          transform: 'translateX(8px)'
        },
        secondType: {
          width: '56px',
          transform: 'translateX(80px)'
        },
        hkvInfo: {
          ip: '10.100.6.30',//海康威视摄像头/硬盘录像机的ip地址
          port: '80',//海康威视摄像头/硬盘录像机的端口
          username: 'admin',//海康威视摄像头/硬盘录像机的用户名
          password: '1234567890q',//海康威视摄像头/硬盘录像机的密码
          channels: [],//海康威视摄像头/硬盘录像机的通道
          szStartTime: this.format(new Date(),'start'),
          szEndTime: this.format(new Date(), 'end')
        },
        mySelectWnd: 0,//当前选中的窗口
        g_bPTZAuto: false,
        iProtocol: 1,
        loginLoading: false,
        startPlayLoading: false,
        iStreamType: 1,
        bZeroChannel: false,
        g_iWndIndex: 0,//当前选中的窗口
      }
    },
    methods: {
      handleVideoPicker() {
        this.hkvInfo.szStartTime = this.formatPicker(this.dataValue[0], 'yyyy-MM-dd hh:mm:ss')
        this.hkvInfo.szEndTime = this.formatPicker(this.dataValue[1], 'yyyy-MM-dd hh:mm:ss')
        this.startPlayBacky()
      },
      // 全屏
      clickbig() {
        WebVideoCtrl.I_FullScreen(true)
      },
      //暂停播放
      clickVideoPause() {
        let that = this
        let oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
          if (that.type === 'first') {
            oWndInfo !== null ? WebVideoCtrl.I_Stop({
              success: function () {
                that.videoPauseStyle = false
              }
            }) : that.startRealPlay();
          } else {
            that.videoPauseStyle ? WebVideoCtrl.I_Pause({
              success: function () {
                that.videoPauseStyle = false
              }
            }) : WebVideoCtrl.I_Resume({
              success: function () {
                that.videoPauseStyle = true
              }
            })
          }
      },
      /**
       * 時間格式化
       * @param val 传入的时间
       * @param i 时间结束开始
       * */
      format(val, i) {
        return formatDate(val, i === 'start' ? 'yyyy-MM-dd 00:00:00' : 'yyyy-MM-dd 23:59:59')
      },
      formatPicker(val, i) {
        return formatDate(val, i)
      },
      /**
       * 选择查看时间
       * @param data 选择的时间
       * */
      handleData(data) {
        this.hkvInfo.szStartTime = `${data.day} 00:00:00`;
        this.hkvInfo.szEndTime = `${data.day} 23:59:59`;
        this.dataValue = [formatDate(new Date(data.day), 'yyyy/MM/dd 00:00:00'), formatDate(new Date(data.day), 'yyyy/MM/dd 23:59:59')]
        this.startPlayBacky()
      },
      //視頻回放功能
      startPlayBacky() {
        let that = this;
        that.type = 'second';
        that.isLoad = true;
        let szDeviceIdentify = `${that.$route.params.item.deviceIp}_${that.$route.params.item.devicePort}`;
        let oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
        let szStartTime = that.hkvInfo.szStartTime;
        let szEndTime = that.hkvInfo.szEndTime;
        let iChannelID = that.$route.params.value.id;
        let startPlayback = function () {
          WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
            iChannelID: iChannelID,
            szStartTime: szStartTime, //開始回放時間
            szEndTime: szEndTime,  //結束回放時間
            success: function () {
              that.isLoad = false;
              that.videoPauseStyle = true
            },
            error: function (status, xmlDoc) {
              if (403 === status) {
                that.$message.error("设备不支持Websocket取流！");
              } else {
                that.$message.error("回放失败,请检查设备是否正常并确保当天有回放信息！");
              }
            }
          });
        };
        //判断是否在播放，先停止
        oWndInfo !== null ? WebVideoCtrl.I_Stop({
          success: function () {
            startPlayback();
          }
        }) : startPlayback();
      },
      //设备初始化
      videoInitPlugin() {
        // let iSnp = WebVideoCtrl.I_SupportNoPlugin();
        // console.log(iSnp);
        // if (!iSnp) {
        //   this.$message.error("浏览器不支持！");
        //   // return;
        // }
        this.initPlugin()
      },
      initPlugin() {
        let that = this;
        WebVideoCtrl.I_InitPlugin('100%', '100%', {
          iWndowType: 1,
          bDebugMode: true,
          bWndFull: true,
          cbInitPluginComplete() {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            that.startRealPlay()
          }
        })
      },
      //视频预览功能
      startRealPlay() {
        let that = this;
        that.type = 'first'
        that.isLoad = true;
        let oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
        let szDeviceIdentify = `${that.$route.params.item.deviceIp}_${that.$route.params.item.devicePort}`;
        let iChannelID = that.$route.params.value.id;
        let startRealPlay = function () {
          WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iChannelID: iChannelID,
            success: function () {
              that.isLoad = false;
              that.videoPauseStyle = true
            },
            error: function (status, xmlDoc2) {
              // console.log(xmlDoc2) 不能删除
              if (status === 403) {
                that.$message.error("设备不支持Websocket取流！");
              } else {
                that.$message.error("预览失败，请检查设备是否正常，并在IE浏览器预览！");
              }
            }
          });
        }
        //判断是否在播放，先停止
        oWndInfo !== null ? WebVideoCtrl.I_Stop({
          success: function () {
            startRealPlay();
          }
        }) : startRealPlay();
      },
    },
    mounted() {
      this.videoInitPlugin();
    },
    beforeRouteLeave (to, from, next) {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(0);
      oWndInfo !== null ? WebVideoCtrl.I_Stop({
        success: function () {
          next()
        }
      }) : next();
    }
  }
</script>


<style lang="less">
  .plugin__box__storeSelect {
    height: 50px;
    width: 100%;
    font-size: 13px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
  }

  .video__detail__page {
    .video__plugin__calendar {
      .el-calendar__body{
        padding: 0;
      }
      .el-calendar-table .el-calendar-day {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        height:48px !important;
        p{
          height: 100%;
          text-align: center;
          line-height: 48px;
        }
        .is-selected{
          background: #ccc;
        }
      }
      .page__item__bottom{
        font-size: 13px;
        .el-input__inner{
          height: 42px;
          width: 86%;
        }
      }
    }

    .plugin__page {
      margin-top: 10px;

      .plugin {
        height: 442px;
      }

      .progress-wrapper {
        width: 100%;
        border: 1px solid;
        height: 60px;

        .progress {
          position: relative;

          .left {
            position: absolute;
            width: 10px;
            background: #7F9DB9;
            height: 60px;
          }
        }
      }
      .plugin__page__item{
        .page__item__top{
          position: relative;
          .video-style{
            bottom: 10px;
            position: absolute;
            font-size: 25px;
            background: none;
            color: #ccc;
            border: none;
            padding: 0;
            margin: 0;
          }
          .video-rank{
            right: 20px;
          }
          .video-pause{
            left: 20px;
          }
        }
        .page__item__bottom{
          font-size: 13px;
          margin-top: 20px;
          .el-input__inner{
            height: 42px;
          }
        }
      }
    }
  }
</style>
